<!-- 消息通知 -->
<template>
  <div class="homeindex">
      <el-card shadow="hover" class="item-background location">
        <el-row>
          <el-text class="font_msg">消息通知</el-text>
        </el-row>
        <el-row style="margin-top:20px;font-size:12px;">
          <el-text>用于消息中心以及运营平台消息通知</el-text>
        </el-row>
      </el-card>
      <el-card shadow="hover" style="margin-top:20px;margin-left:20px;margin-right:20px;">
        <div style="margin-left:50px">
          <!-- 标题 -->
          <el-row type="flex" justify="center" align="middle">
            <el-col :span="2">
              <el-text style="font-size:15px;margin-right:20px;">标题:</el-text>
            </el-col>
            <el-col :span="22">
                <el-input v-model="title" style="width: 400px" placeholder="事件标题" />
            </el-col>
          </el-row>
          <!-- 事项 -->
          <el-row type="flex" justify="center" align="middle" style="margin-top:10px">
            <el-col :span="2">
              <el-text style="font-size:15px;margin-right:20px;">事项:</el-text>
            </el-col>
            <el-col :span="22">
              <el-input v-model="notify_detail" type="textarea" style="width: 600px" placeholder="通知事项" :rows="8"/>
            </el-col>
          </el-row>
          <!-- 事项时效 -->
          <el-row type="flex" justify="center" align="middle" style="margin-top:10px">
            <el-col :span="2">
              <el-text style="font-size:15px;margin-right:20px;">事项时效:</el-text>
            </el-col>
            <el-col :span="22">
              <el-date-picker
                v-model="notify_time"
                type="datetimerange"
                unlink-panels
                range-separator="To"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :shortcuts="shortcuts"
                :size="size"
              />
            </el-col>
          </el-row>
          <!-- 推送目标 -->
          <el-row type="flex" justify="center" align="middle" style="margin-top:10px">
            <el-col :span="2">
              <el-text style="font-size:15px;margin-right:20px;">推送目标:</el-text>
            </el-col>
            <el-col :span="22">
              <el-radio-group v-model="notify_targe">
                <el-radio label="客户业务运营部全员" size="large">客户业务运营部全员</el-radio>
                <el-radio label="运营支撑部" size="large">运营支撑部</el-radio>
                <el-radio label="业务支撑部" size="large">业务支撑部</el-radio>
                <el-radio label="值班经理" size="large">值班经理</el-radio>
                <el-radio label="非工作日值班" size="large">非工作日值班</el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
          <!-- 通知人 -->
          <el-row type="flex" justify="center" align="middle" style="margin-top:10px">
            <el-col :span="2">
              <el-text style="font-size:15px;margin-right:20px;">通知人:</el-text>
            </el-col>
            <el-col :span="22">
              <el-input style="width:200px;" v-model="notify_duty"/>
            </el-col>
          </el-row>
        </div>

        <!-- 按钮 -->
        <div style="margin-left:150px">
          <el-row type="flex" align="middle" style="margin-top:20px">
            <el-col :span="4">
              <el-button type="primary" @click="CreateNotifyItem()">新增并通知</el-button>
            </el-col>
            <el-col :span="20">
              <el-button>返回</el-button>
            </el-col>
          </el-row>
        </div>
      </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        title:'', // 标题
        notify_detail:'', // 通知事项
        notify_time:"", //事项时效
        notify_targe:[],  // 通知目标
        notify_duty:'', // 通知人
      };
    },
    methods: {
      async CreateNotifyItem(){
        var res = await this.$API.front_api.create_notify_item.post([
          this.notify_duty,
          this.notify_targe,
          this.title,
          this.notify_time,
          this.notify_detail
      ]);
        console.log("标题：",this.title);
        console.log("通知事项：",this.notify_detail);
        console.log("事项时效：",this.notify_time);
        console.log("通知目标：",this.notify_targe);
        console.log("通知人：",this.notify_duty);

        // 清空数据
        this.title="";
        this.notify_detail="";
        this.notify_time="";
        this.notify_targe=[];
        this.notify_duty="";
        return res
      },
  },
}
</script>


<style scoped lang="scss">
.homeindex {
  .location{
      margin-top:10px;
  }
  .font_msg{
    font-size: 20px;
    font-weight:bold;
    font-size:20px;
  }
}
</style>